
	////// 配置启用 /////////////////////////////////////////////////////////

    var autoPlay = 1;		// 初始化自动播放状态(true/false或者1/0)
    //var loopFlag = 1; 		// 循环播放模式（0:单曲循环/1:列表循环）
    //var volumeOn = 1;		// 是否静音 (0:静音/1:有声)
    //var volumeVal = 5;		// 初始音量 （范围1~10）
    var mp3Url = './data2.json'; // 获取静态json数据URL
    //var mp3Url = 'http://127.0.0.1/audio/php/data.php'; // 动态获取json数据URL
    window.onload = function(){
        audioFun(); //载入音频
    }

/////////////////////////////////////////////////////////////////////////

/**************
 * 启动音频方法 *
 *************/
function audioFun(){
    var _loadDom = document.getElementById("load_box");			// 加载层DOM
    var _backDom = document.getElementById("back_box")			// 背景图DOM	
    var _audioDom = document.getElementById("audio_box"); 		// 音频DOM
    var _cdImgDom = document.getElementById("cd_img");			// CD模拟DOM
    var _musicNameDom = document.getElementById("music_title")	// 标题DOM
    var _progress = document.getElementById("progress_bar");	// 进度条DOM
    var _aheadDom = document.getElementById("ahead_head"); 		// 播放进度头DOM
    var _totalTime = document.getElementById("total_time");		// 音频总时间DOM
    var _nowTime = document.getElementById("now_time");			// 音频当前播放时间DOM
    var _prevDom = document.getElementById('btn_prev');			// 上一曲DOM
    var _nextDom = document.getElementById('btn_next');			// 下一曲DOM
    var _volumeSet = document.getElementById('volume_toggle');	// 声音/静音DOM
    var _loopDom = document.getElementById('loop_type');		// 循环模式DOM
    var _playDom = document.getElementById('btn_play');			// 播放/暂停DOM
    var _lyricPrev = document.getElementsByClassName("lyric_prev")[0];	// 歌词上一句DOM
    var _lyricNow = document.getElementsByClassName("lyric_now")[0];	// 歌词当前句DOM
    var _lyricNext = document.getElementsByClassName("lyric_next")[0];	// 歌词下一句DOM
    var _slideway = document.getElementsByClassName("slideway")[0];		// 播放条DOM
    var slidewayWidth = _slideway.clientWidth||_slideway.offsetWidth;	// 播放条总长度DOM
    var start_X = start_Y = end_X = end_Y = 0; 					//快进快退拖动鼠标光标初始值
    var lyricArr = [];				// 歌词初始数组
    //_volumeDom.value = volumeVal; 	// 初始音量值
    //loopFun(loopFlag); 				// 初始循环播放模式
    //volumeFun(volumeOn); 			// 初始声音模式
    fileInfo(1,''); 				// 初始化载入

    /**
     * 获取音频信息
     */
    function fileInfo(songId,flag){
        if(!songId){
            return false;
        }
        _loadDom.style.display="block";	// 显示加载层

        //请求数据
        var param = 'id='+songId+'&flag='+flag;
        ajax('GET', mp3Url, param, function(data){
            _loadDom.style.display="none";	// 隐藏加载层
            ////////////静态获取json文件 <<< ////////////////////////////////////////
            if(songId){
                var data = JSON.parse(data);    // json字符串转json对象
                var leng = data.length;
                var dataJson = {};
                if(flag == 'N'){
                    dataJson = songId >= leng ? data[0] : data[songId];
                }else if(flag == 'P'){
                    dataJson = songId-2 <= 0 ? data[0] : data[songId-2];
                }else{
                    dataJson = songId-1 <= 0 ? data[0] : data[songId-1];
                }
                _backDom.style.backgroundImage = "url('"+dataJson.backimg+"')";
                _musicNameDom.innerText = dataJson.title;
                _cdImgDom.style.backgroundImage = "url('"+dataJson.img+"')";
                _audioDom.setAttribute('src', dataJson.src);
                _audioDom.setAttribute('data-id', dataJson.id);
                lyricArr = dataJson.lyric;
                // 音频操作
                if(autoPlay){
                    audioFun();
                }
            }else{
                console('Errer: '+data);
            }
        });
    }

    // 启动播放方法
    function plays(){
        let playPromise = _audioDom.play();
        if (playPromise !== undefined) {
          playPromise.then(() => {
            _audioDom.play()
          }).catch(() => {})
        }
        
        // 更新样式
        if(!_audioDom.paused){
            _playDom.innerHTML="&#xe6a2;";
            _cdImgDom.classList.add('rainbow');
            document.getElementById("needle").classList.add('run');
        }
    }
    
    /**
     * 为【声音/静音】切换按钮绑定事件处理方法
     */
     _volumeSet.onclick = function(){
        //判断当前audio音频对象是否关闭声音
        if(_audioDom.muted){
            _volumeSet.innerHTML="&#xe6e4;"; //有声音图标
            _audioDom.muted = false; //开启声音
        }else{
            _volumeSet.innerHTML="&#xe6e1;"; //静音图标
            _audioDom.muted = true;  //静音
        }
    }

    /**
     * 为【播放/暂停】按钮绑定事件处理方法
     */
     _playDom.onclick = function(){
        //获取并判断音频audio对象的播放状态是否是暂停状态
        if(_audioDom.paused){
            plays(); //执行播放
        }else{
            _audioDom.pause(); //执行暂停
            _playDom.innerHTML="&#xe6a8;"; //修改成播放按钮
            _cdImgDom.classList.remove('rainbow'); //CD碟片停止旋转
            document.getElementById("needle").classList.remove('run');
        }
    }

    /**
     * 点击上一首
     */
    _prevDom.onclick = function(){
        var prevSong = _audioDom.getAttribute('data-id');
        fileInfo(prevSong,'P');
    }

    /**
     * 点击下一首
     */
    _nextDom.onclick = function(){
        var nextSong = _audioDom.getAttribute('data-id');
        fileInfo(nextSong,'N');
    }

    /**
     * 播放模式【单曲循环/列表循环】按钮事件切换处理函数
     */
    _loopDom.onclick = function(){
        var loopFlag = _loopDom.getAttribute('item');
        if(loopFlag == '0'){
            _loopDom.setAttribute('item', '1');
            _loopDom.innerHTML="&#xe69e;";
        }else{
            _loopDom.setAttribute('item', '0');
            _loopDom.innerHTML="&#xe6a7;";
        }
    }

    /**
     * 音频运行设置 Function
     */
    function audioFun(){
        //_audioDom.play();
        plays();
    
        /** 当在加载时获取audio的总时间 **/
        _audioDom.onprogress = function(){
            _totalTime.innerHTML = timeFormat(_audioDom.duration);
        };

        /** 当前播放时间发生改变的时候 **/
        _audioDom.ontimeupdate = function(){
            _totalTime.innerHTML = timeFormat(_audioDom.duration);	// 音频总时间;
            _nowTime.innerHTML = timeFormat(_audioDom.currentTime);	// 更新当前播放的时间;
            var now_long = _audioDom.currentTime/_audioDom.duration*slidewayWidth; // 当前时间播放的长度
            //var now_long = _audioDom.currentTime/43*slidewayWidth;
            _progress.style.width = now_long+'px';	   // 进度条长度
            _aheadDom.style.left = (now_long-10)+'px'; // 进度条头位置

            //遍历歌词
            for (var i = 0, l = lyricArr.length; i < l; i++) {
                if (_audioDom.currentTime > lyricArr[i][0]) {
                    if(i>=1){
                        _lyricPrev.innerHTML = lyricArr[i-1][1];
                        _lyricNow.innerHTML = lyricArr[i][1];
                        if(lyricArr.hasOwnProperty(i+1)){
                            _lyricNext.innerHTML = lyricArr[i+1][1];
                        }else {
                            _lyricNext.innerHTML = '';
                        }
                    }else{
                        _lyricPrev.innerHTML = '';
                        _lyricNow.innerHTML = lyricArr[i][1];
                        _lyricNext.innerHTML = lyricArr[i+1][1];
                    }
                }
            }
            
        };

        /** 播放完毕后-执行最新播放模式 **/
        _audioDom.addEventListener('ended', function () {
            var loopFlag = _loopDom.getAttribute('item');
            if(loopFlag == '0'){
                var audioId = _audioDom.getAttribute('data-id');
                fileInfo(audioId,'');
            }else if(loopFlag == '1'){
                var nextSong = _audioDom.getAttribute('data-id');
                fileInfo(nextSong,'N'); // 下一曲
            }
        }, false);
        
        addListenTouch(); // 监听手动拉动播放进度条
    }

    /**
     * 手动拉拽进度条
     */
    function addListenTouch(){
        _aheadDom.addEventListener("touchstart", touchStart, false);
        _aheadDom.addEventListener("touchmove", touchMove, false);
        _aheadDom.addEventListener("touchend", touchEnd, false);
    }
    //触摸时
    function touchStart(e){
        e.preventDefault();
        _audioDom.pause();
        var touch = e.touches[0];
        start_X = touch.pageX; // 初始X位置
    }
    //滑动时
    function touchMove(e){
        //e.preventDefault();
        var touch = e.touches[0];
        var x_long = touch.pageX-start_X; // 滑动的距离
        var now_long = _audioDom.currentTime/_audioDom.duration*slidewayWidth;	// 已播放进度条长度
        var widthBar = now_long + x_long; // 拖拽后进度条总长度
        _progress.style.width = widthBar+'px'; 	// 更新进度条长度
        if(widthBar < slidewayWidth){
            _aheadDom.style.left = (widthBar-10)+'px'; 	// 按钮位置
        }
        var now_times = widthBar/slidewayWidth*_audioDom.duration; // 滑动后时间
        _nowTime.innerHTML = timeFormat(now_times);
    }
    //手指离开屏幕
    function touchEnd(e){
        e.preventDefault(); // 取消事件的默认动作
        var widthBar = _progress.clientWidth||progress_bar.offsetWidth;
        var now_times = ((widthBar-10)/(slidewayWidth-20)*_audioDom.duration);
        _audioDom.currentTime = now_times;
        plays();
    }

    /**
     * 时间格式转换- 00:00
     */
    var timeFormat = function(seconds){
        var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
        var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
        return m+":"+s;
    };

    /**
     * 自定义Ajax 请求方法
     */
    function ajax(method, url, data, fnsuccess) {
        var xhr;
        // 1创建对象，兼容问题
        if(window.XMLHttpRequest) {
            //在高版本的浏览器 IE7+
            xhr = new XMLHttpRequest();
        } else {
            //IE5 IE6
            xhr = new ActiveXObject();
        }
        // 2发送请求
        if(method == 'GET' && data) {
            url = url + '?' + data;
        }
        xhr.open(method, url, true);
        // 3参数
        if(method == 'GET') {
            xhr.send(null);
        } else {
            //创建头文件信息
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }
        // 4接受后台传过来的数据，解析 dom操作
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) { 	//响应过程状态信息
                if(xhr.status == 200) { //status:状态码
                    fnsuccess && fnsuccess(xhr.responseText);
                } else {
                    console.log(xhr); //发生错误时，返回该状态码
                }
            }
        }
    }

}